<template>
  <div class="container">
    <baleTable :tableData="tableData" :tableHead="tableHeadOrderList" :isSearch="true" :isTableRowClick="true"
      :tableLoading="tableLoading" :page="page" @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange" @searchMethods="searchMethods" @tableSortChange="tableSortChange"
      @handleRowClick="handleRowClick" :isExport="exportBtn" @handleTableExport="handleTableExport" ref="baleTable">
      <template #totalDetail="{ scope }">
        <div @click.stop="">
          <el-popover placement="top-start" width="200" trigger="hover">
            <div v-for="(item, index) in scope.row.price_detailCopy" :key="index">
              {{ item.name }}:{{ item.value }}
            </div>
            <el-button size="small" type="primary" slot="reference">价格详情</el-button>
          </el-popover>
        </div>
      </template>
      <template #status="{ scope }">
        <el-tag :type="formatterStatus(scope.row.status).type">
          {{ formatterStatus(scope.row.status).name }}</el-tag>
      </template>
      <template #category_id="{ scope }">
        {{ formatterCategory_id(scope.row.category_id) }}
      </template>

      <template #finish_time="{ scope }">
        {{ scope.row.finish_time?scope.row.finish_time:scope.row.cancel_time }}
      </template>

      <template #headLeft>
        <tableHeadSelect :selectList="headSelectList" @headSelectChange="headSelectChange" />
      </template>

    </baleTable>
    <orderDetail ref="orderDetail" @refresh="handleSelectTableType(tableType)"></orderDetail>
  </div>
</template>

<script>
import { tableHeadOrderList } from "../orderList/config";
import {
  ApiGetOrderList,
  ApiGetOrderAllocationList,
} from "@a/index";
import orderDetail from "../orderList/component/detail.vue";
import tableHeadSelect from "@/components/tableHeadSelect.vue";

export default {
  components: {
    orderDetail,
    tableHeadSelect,
  },
  data() {
    return {
      tableType: "2",
      tableHeadOrderList,
      tableHead1: [],
      formInline: {},
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      exportBtn: true,
      searchParams: {},
      sortParams: {},
      tableLoading: false,
      tableData: [],
      cateList: [],
      statusFormatter: [
        {
          name: "待支付",
          code: "1",
          type: "danger",
        },
        {
          name: "待接单",
          code: "2",
          type: "",
        },
        {
          name: "已接单",
          code: "3",
          type: "warning",
        },
        {
          name: "已出发",
          code: "4",
          type: "warning",
        },
        {
          name: "已上门",
          code: "5",
          type: "warning",
        },
        {
          name: "已完成",
          code: "6",
          type: "success",
        },
        {
          name: "已取消",
          code: "7",
          type: "danger",
        },
        {
          name: "退款中",
          code: "8",
          type: "danger",
        },
      ],

      headSelectList: [
        {
          label: "全部",
        },
        {
          label: "待分配",
          count: "",
          default: true
        },
      ],
    };
  },
  mounted() {
    this.resetTableType()
    this.getData();
  },

  methods: {
    //导出
    handleTableExport(exportType) {
      let params = {
        is_export: 1,
        allPage: 2
      };
      if (exportType == 2) {
        params = {
          ...params,
          ...this.searchParams,
          ...this.sortParams,
          ...this.selectParams,
        };
      }
      if (this.tableType == 2) {
        ApiGetOrderAllocationList(params, {
          timeout: 10 * 60 * 1000,
          responseType: 'blob'
        }).then((res) => {
          if (res) this.$refs["baleTable"].exportDownload(res, '订单数据列表');
        });
      } else {
        ApiGetOrderList(params, {
          timeout: 10 * 60 * 1000,
          responseType: 'blob'
        }).then((res) => {
          if (res) this.$refs["baleTable"].exportDownload(res, '订单数据列表');
        });
      }

    },


    //切换下拉框
    headSelectChange(data) {
      this.page.page = 1
      this.page.total = 0
      /*       this.searchParams = {} */
      if (data.label == "待分配") {
        this.tableType = "2";
        this.getTableAllocationList();
      } else {
        this.tableType = "0";
        this.getTableData();
      }
    },
    getData() {
      const index1 = this.tableHeadOrderList.findIndex(
        (item) => item.prop === "status"
      );
      if (index1 >= 0) {
        this.tableHeadOrderList[index1].searchOptions = this.statusFormatter;
      }
    },
    formatterStatus(val) {
      let data = this.statusFormatter.find((item) => {
        if (item.code == val) {
          return item;
        }
      });
      if (data) {
        return data;
      } else {
        return val;
      }
    },
    handleSelectTableType(val) {
      this.page.page = 1;
      this.searchParams = {};
      this.resetTableType();
    },


    //订单列表
    getTableData(params = {}) {
      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
      };
      this.tableLoading = true;
      this.tableData = [];
      ApiGetOrderList(postParams)
        .then((res) => {
          let { data, page } = res;
          this.tableData = data;
          this.page.total = page.total;
          this.tableLoading = false;
          this.headSelectList[1].count = res.allocation;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },



    //分配列表
    getTableAllocationList(params = {}) {
      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
      };
      this.tableLoading = true;
      this.tableData = [];
      ApiGetOrderAllocationList(postParams)
        .then((res) => {
          let { data, page } = res;
          this.tableData = data;
          this.page.total = page.total;
          this.headSelectList[1].count = res.allocation;
          this.tableLoading = false;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    searchMethods(params) {
      console.log("111");
      this.searchParams = {};
      this.page.page = 1;
      //重置当前订单数据
      this.searchParams = params;
      this.resetTableType();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.resetTableType();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.resetTableType();
    },
    tableSortChange(params) {
      if (params.sort_str) {
        this.sortParams = { ...this.sortParams, ...params };
      } else {
        delete this.sortParams.sort_str;
        delete this.sortParams.sort_order;
      }
      this.page.page = 1;
      this.resetTableType();
    },
    resetTableType() {
      if (this.tableType == "0") {
        this.getTableData();
      } else if (this.tableType == "2") {
        this.getTableAllocationList();
      }
    },
    //订单详情列表查看
    handleRowClick(row) {
      this.$refs.orderDetail.show(row.row);
    },
  },
};
</script>
<style></style>
